김테드

김테드

꾸준하고, 호기심 넘치는 개발자




[JavaScript] JS 내장 객체, 브라우저 객체, JS 삽입위치

업데이트:



✅ 자바스크립트 내장 객체

📌 Array 객체

자바스크립트에는 배열을 쉽게 만들고 다룰수 있는 Array 객체가 내장되어 있다. 객체를 만들기 위해서는 인스턴스가 필요하기 때문에 new 예약어와 함께 사용하면 된다.

// 초기값을 지정하지 않는 경우
var numbers = new Array();		// 배열의 크기를 지정하지 않음
var numbers = new Array(4);		// 배열의 크기를 지정함

// 초기값이 있는 경우
var numbers = ["one", "two", "three", "four"];		// 배열선언
var numbers = Array("one","two","three","four");	// Array객체 사용 배열 선언



📌 Array 객체의 메서드

Array 객체는 여러가지 메서드가 있다. 간단하게 표로 정리해보자.

종류 설명
concat 기존 배열에 요소를 추가해 새로운 배열을 만듭니다
every 배열의 모든 요소가 주어진 함수에 대해 참이면 true, 그렇지 않으면 false를 반환한다
filter 배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만든다
forEach 배열의 모든 요소에 대해 주어진 함수를 실행한다
indexOf 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾는다
join 배열 요소를 문자열로 합친다. 이때 구분자를 지정할 수 있다
push 배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환한다
unshift 배열의 시작 부분에 새로운 요소를 추가한다
pop 배열의 마지막 요소를 꺼내 그 값을 결과로 반환한다
shift 배열의 첫번째 요소를 꺼내 그 값을 결과로 반환한다
splice 배열의 요소를 추가하거나 삭제한다
slice 배열에서 특정한 부분만 잘라낸다
reverse 배열의 배치 순서를 역순으로 바꾼다
sort 배열 요소를 지정한 조건에 따라 정렬한다
toString 배열에서 지정한 부분을 문자열로 반환한다. 이때 각 요소는 쉼표(,)로 구분한다



📌 JS의 삽입 위치

JS코드는 <header> 에 포함될 수도 있고, <body>에 포함될 수도 있다. 그러나 대부분의 경우 JS코드는 <body> 내부에 포함시켜 작성된다. <header> 에 위치하는 것과 <body>에 위치하는게 어떤 차이가 있고 왜 <body>에 대부분 작성하는지 알아보자.

브라우저는 HTML의 구조와 CSS 스타일을 렌더링하는 도중 자바 스크립트를 만나게 되면 이에 대한 해석과 구현이 완료될때까지 브라우저 렌더링을 중단한다. 이후 포스팅을 이해하기 위해서는 브라우저 렌더링이 어떤 것이고, 어떤 과정을 거치는지 알 필요가 있기 때문에 브라우저 렌더링 과정 포스팅을 참고하길 바란다.

한마디로, 자바스크립트의 삽입 위치가 브라우저 렌더링에 영향을 미친다는 것이다.

<header>
(..생략..)
	<script>
		document.querySelector("#aa").onclick = function(){
			alert("aa 선택됨");
		}
	</script>
(...생략...)
</header>

<body>
	(...생략...)
</body>

위의 코드는 aa라는 아이디를 가진 요소를 클릭했을 때 “aa 선택됨” 이라는 경고창을 띄워주는 코드이다. 그러나 위 코드는 정상적으로 작동하지 못한다. <script> 코드가 <body> 코드보다 앞서 존재하기 때문에 아직 브라우저 렌더링이 시작되지 않았고, 이로인해 document 객체가 HTML요소를 가지고 있지 않기 때문에 #aa 라는 아이디를 가진 요소를 찾을 수가 없다.


이런 코드를 실행시키면 alert창이 안뜨게 된다. 왜냐하면 document라는 객체는 HTML 문서의 정보를 가지는 객체인데, HTML요소는 body에 선언되어 있고 , header는 body보다 위쪽에 선언되어 있기때문에 document에는 아직 아무런 요소가 들어있지 않다. 즉, document가 aa라는 요소를 찾지 못하기때문에 발생하는 오류이다.


그렇다고 <header> 부분에 <script> 코드를 절대 작성하지 못하는 것은 아니다. 언제나 그렇듯 방법은 존재하기 마련이다..

JS의 최상단 객체인 window 객체의 onload 메서드를 사용하면 된다. window객체는 브라우저 창이 열릴 때 마다 생성되는 객체이고 JS의 모든 객체의 부모노드라고 볼 수 있다.

onload 메서드는 페이지의 모든 요소들이 로드되면 실행되는 전역 콜백 함수이다. 한 페이지에서 하나의 window.onload() 함수만 적용되는 특징이 있다. 때문에 자바스크립트 코드에 window.onload 를 붙여주면 모든 요소가 로드 된 후에 자바스크립트 코드를 실행하기 때문에 정상적으로 사용 가능하다. 아래는 예시 코드이다.

<header>
	<script>
		window.onload = function(){
			document.querySelector("#aa").onclick = function(){
			alert("aa 선택됨");
		}
	<script>
<header>





✅ 브라우저 관련 객체

웹 브라우저가 화면에 나타나는 순간 브라우저는 관련 객체를 만들어 낸다. 가장 먼저 window라는 최상단 객체가 만들어지고 그 밑으로 하위요소에 해당하는 객체들이 생성된다. 이는 계층구조로 나타낼 수 있고 아래 이미지 처럼 구성된다.


관련 객체들을 간단하게 표로 정리해보겠다.

종류 설명
window 브라우저 창이 열릴 때마다 하나씩 만들어진다. 브라우저 창 안의 요소 중 최상단에 위치한다
document 웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어진다. HTML 문서의 정보가 담겨있다
navigator 현재 사용하는 브라우저의 정보가 들어있다
history 현재 창에서 사용자의 방문 기록을 저장한다
location 현재 페이지의 URL 정보가 담겨있다
screen 현재 사용하는 화면 정보를 다룬다


이 외에도 정말 많은 객체, 프로퍼티, 메서드가 있지만 많이 사용하는 편은 아니고 굳이 다 외워둘 필요 없기때문에 작성하지 않겠다. 필요하다면 다른 블로그 게시물을 확인하면 되겠다.

참고 : 자바스크립트 내장 객체 & 브라우저 객체 메서드와 프로퍼티 정리

댓글남기기

최근 게시글